var template = Handlebars.compile(achievementTemplate);



var afficheAchievement = function(div,achievement) {
	if(!achievement.finish){
		return;
	}
	var html = $(template(achievement));
	var rouge = ["rgb(248,27,34)","rgba(248,27,34,0.8)"];
	var bleu = ["rgb(26,80,251)","rgba(26,80,251,0.8)"];
	var jaune = ["rgb(255,195,31)","rgba(255,195,31,0.8)"];
	var insigneFromType = { 'CADET' : [rouge], 'LIEUTENANT' : [bleu,bleu,jaune,jaune], 'COMMANDANT' : [bleu,bleu,bleu,bleu,jaune,jaune]  }
	var largeur = 9;
	var hauteur = 14;
	var start = 2;

    var canvas = html.find("#canvas");
	div.append(html);
    var ctx = canvas[0].getContext('2d');
    var insigne = [rouge];
    if (ctx){
    	ctx.fillStyle = "black";
     	ctx.save();
     	ctx.shadowColor = "#aaa";
        ctx.shadowBlur = 6;
        ctx.shadowOffsetX = 1;
        ctx.shadowOffsetY = 1;
    	ctx.fillRect(start,start,largeur * insigneFromType[achievement.type].length,hauteur);
    	ctx.restore();
    	ctx.strokeStyle = "#888";
    	$.each(insigneFromType[achievement.type],function(indice,couleur){
        	var lingrad = ctx.createLinearGradient(0,0,0,hauteur);
        	lingrad.addColorStop(0, couleur[0]);
        	lingrad.addColorStop(1, couleur[1]);
        	ctx.fillStyle = lingrad;
        	ctx.fillRect(start + (largeur*indice),start,largeur,hauteur);
        	ctx.lineWidth  = 1;
        	ctx.strokeRect(start+ (largeur*indice),start,largeur,hauteur);
    	});
    }
}